import { Ref, useRef, useState } from 'react';
import { Form, Spin } from 'antd';

import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { getLoadMapList, getSelectDataCommon, getTenantID, onCloseModalCommon } from '@/utils';
import { TagSelectNew as TagSelect } from '@/components/TagSelectNew';
import { Descriptions, useDescriptions } from '@/components/Descriptions';
import { ILoadMapTypeAll } from '@/common';
import { generateRandomNumber } from '../common/Format';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { UploadFormCommon } from '@/components/UploadForm';

/**
 * @ExpertsAddDeputyModal 采购人代表弹窗
 * @param onSave 保存事件
 * @param onClose 关闭事件
 * @returns
 */
const ExpertsAddDeputyModal = ({ onSave, onClose }: Record<string, any>) => {
  /**弹窗Ref*/
  const oneModalRef: Ref<IOneModalRef> = useRef(null);

  const loadMdicIds: string[] = [`${getTenantID()}${ILoadMapTypeAll.EXPERTS_CARD_TYPE}`];

  const { loadMapInfo } = getLoadMapList(loadMdicIds);

  const [titleFlag, setTitleFlag] = useState(false);

  // 表单实例
  const [formRef] = Form.useForm();

  const experts_type = getSelectDataCommon(loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.EXPERTS_CARD_TYPE}`], 'name', 'id');

  // 上传文件地址
  const [uploadUrl, setUploadUrl] = useState<string | null>(null);

  const [config, { getFieldsValue, validateFields }] = useDescriptions({
    name: 'source-add-deputy',
    labelWidth: 250,
    schemas: [
      {
        label: '采购人评标代表资格条件',
        field: 'baseInfo',
        component: 'Title',
      },
      {
        label: '姓名',
        field: 'fullName',
        component: 'Input',
        required: true,
        colSpan: 1,
      },
      {
        label: '联系电话',
        field: 'phoneMobile',
        component: 'Input',
        required: true,
        colSpan: 1,
      },
      {
        label: '证件类型',
        field: 'cardType',
        component: 'Select',
        options: experts_type,
        fieldNames: { label: 'name', value: 'value' },
        required: true,
        colSpan: 1,
      },
      {
        label: '证件号码',
        field: 'cardNum',
        component: 'Input',
        required: true,
        colSpan: 1,
      },
      {
        label: '工作单位',
        field: 'companyName',
        component: 'Input',
        required: true,
        colSpan: 1,
      },
      {
        label: '现任职务',
        field: 'positionName',
        component: 'Input',
        required: true,
        colSpan: 1,
      },

      {
        label: '是否有职称',
        field: 'titleFlag',
        component: 'Render',
        required: true,
        colSpan: titleFlag ? 1 : 2,
        slotRender: () => {
          return (
            <TagSelect
              colSpan={24}
              formLabel={''}
              formName={'titleFlag'}
              defalultKeys={0}
              radioList={[
                {
                  value: 0,
                  name: '无',
                },
                {
                  value: 1,
                  name: '有',
                },
              ]}
              onChange={(val) => {
                setTitleFlag(Boolean(val));
              }}
            />
          );
        },
      },
      {
        label: '技术职称',
        field: 'titleTech',
        component: 'Input',
        colSpan: titleFlag ? 1 : 0,
        required: true,
      },
      {
        label: '是否熟悉招标采购有关法规',
        field: 'lawFlag',
        component: 'Render',
        required: true,
        // colSpan: titleFlag ? 2 : 1,
        colSpan: 2,
        slotRender: () => {
          return (
            <TagSelect
              colSpan={24}
              formLabel={''}
              formName={'lawFlag'}
              defalultKeys={0}
              radioList={[
                {
                  value: 0,
                  name: '否',
                },
                {
                  value: 1,
                  name: '是',
                },
              ]}
            />
          );
        },
      },
      {
        label: '是否具有同类项目评标经历',
        field: 'experFlag',
        component: 'Render',
        required: true,
        colSpan: 2,
        slotRender: () => {
          return (
            <TagSelect
              colSpan={24}
              formLabel={''}
              formName={'experFlag'}
              defalultKeys={0}
              radioList={[
                {
                  value: 0,
                  name: '否',
                },
                {
                  value: 1,
                  name: '是',
                },
              ]}
            />
          );
        },
      },
      {
        label: '推荐说明',
        field: 'suggestInfo',
        component: 'InputTextArea',
        required: true,
        maxLength: 200,
        allowClear: true,
        autoSize: { minRows: 4, maxRows: 6 },
        showCount: true,
        colSpan: 2,
      },
      {
        label: '相关附件',
        field: '',
        component: 'Render',
        required: false,
        colSpan: 2,
        slotRender: (text) => {
          return (
            <div>
              <UploadFormCommon
                form={formRef}
                fileFormName={'attachURL'}
                spanCol={24}
                inRowProportion={24}
                name={'attachFile'}
                required={false}
                accept={'.doc|.docx'}
                url={'/purchaseSourceController/uploadFile'}
                downloadUrl={'/purchaseSourceController/downloadFile'}
                fileFormDelName={'delFile'}
                // delFunc={(delFilePath: string) => { handleDelFileFn(delFilePath, fileName); }}
                // uploadSuccessCallback={(attachPaths) => { handleAddFileFn(attachPaths, fileName) }}
                delFunc={() => {
                  setUploadUrl(null);
                }}
                uploadSuccessCallback={(file) => {
                  setUploadUrl(file);
                }}
                defaultFiles={text}
                maxFile={1}
                hintTitle={'且只能上传 1 个！'}
                fieldBusiPath={'purchase/source'}
                // isShowUploadBtn={true}
              >
                上传
              </UploadFormCommon>
            </div>
          );
        },
      },
    ],
  });

  /** 确认 */
  const onModalOk = async () => {
    await validateFields();
    onSave({ ...getFieldsValue(), expertFlag: 2, mockID: generateRandomNumber('deputy_'), attachURL: uploadUrl });
    onCloseModalCommon(oneModalRef);
  };

  return (
    <OneModal
      open={true}
      onCancel={onClose}
      centered={true}
      title={'添加采购人代表'}
      bodyStyle={{ height: '600px', padding: '0', overflow: 'hidden' }}
      width={document.body.clientWidth * 0.6}
      ref={oneModalRef}
      onOk={onModalOk}
      className={'selectDeputy-modalDiv'}
    >
      <Spin spinning={false} style={{ height: '100%' }}>
        <ScrollBarLayout style={{ padding: 10 }}>
          <Descriptions config={config} />
        </ScrollBarLayout>
      </Spin>
    </OneModal>
  );
};
export default ExpertsAddDeputyModal;
